<template>
    <div class="header-title">
        <h2>{{ $t('mod.contact.index.tit') }}</h2>
        <el-button color="#d24c0e" @click="showEditWebPage" v-if="roleStore.isSuperAdmin">{{ $t('mod.announcement.index.btn_txt3') }}</el-button>
    </div>
    <div class="rich-box" v-html="siteInfo?.description"></div>
    <div class="modified" v-if="siteInfo">{{ $t('mod.contact.index.con') }}{{ formatLoginTime(siteInfo.created_at) }}</div>
    <QuickJump url="/console/mod/contact"></QuickJump>
    <EditWebPage ref="EditWebPageRef" :type="3" :title="$t('mod.contact.index.tit')" @relRefresh="getFqaList" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoleStore } from '@/stores/role'
const roleStore = useRoleStore()
import type { SiteInfo } from '@/types/siteInfo'
import SiteInfoService from '@/api/siteInfo'

import { formatLoginTime } from '@/utils/global'
import QuickJump from '@/components/QuickJump.vue'
const loading = ref(false)
import EditWebPage from '@/components/EditWebPage.vue'
const EditWebPageRef = ref()
const showEditWebPage = () =>{
    EditWebPageRef.value.initDialog('edit', siteInfo.value.id)
}
const siteInfo = ref<SiteInfo>()
function getFqaList() {
    loading.value = true
    SiteInfoService.contact()
        .then(res => {
            siteInfo.value = res[0]
        })
        .finally(() => {
            loading.value = false
        })
}

onMounted(() => {
    getFqaList()
})
</script>

<style lang="less" scoped>
h2 {

    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}
.header-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.modified {
    margin-top: 20px;
    font-size: 12px;
    color: #a5a5a5;
}
</style>
